<template>
	<view class="Global">
		<!-- 搜索栏 -->
		<view class="searchContentOut">
			<view class="searchContent">
				<input :placeholder="inputcontent"  @input="onInput"      type="text" class="searchInput" />
				<view class="searchBg"  @click="sendSonData()">
					<image src="../static/gongzuotai/sousuo.png" class="searchImg" mode=""></image>
				</view>
			</view>
		</view>

	</view>
</template>  
 
<script>
	export default {
		name: "searchInput",
		// 接收父传给子的参数
		props: {
			inputcontent: String
		},
		data() {
			return {
				remarks:'',
				

			}

		},
		methods: {

			sendSonData() {
				var that = this
				//子组件向父组件传递数据
				that.$emit("sendData", this.remarks)
			},
			onInput(e) {
				this.remarks=e.detail.value
				// console.log('点击输入框获取值',e.detail.value);
				// this.inputcontent = e.detail.value
			}

		}
	}
</script>

<style lang="scss">
	
	.searchBg {
		width: 100rpx;
		height: 80rpx;
		background: linear-gradient(90deg, #45A8FF, #0AE1C6);
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		
		

	}
	.searchImg {
		width: 36rpx;
		height: 36rpx;
	}

	.searchInput {

		width: 590rpx;
		height: 100%;
		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #BBBBBB;
		padding-left: 30rpx;
		
		// background-color: greenyellow;
		



	}

	.searchContentOut {
		display: flex;
		justify-content: center;
	}

	.searchContent {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 690rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 30rpx;

		flex-direction: row;
// background-color: red;



	}
</style>